<template>
  <div>
    <el-row :gutter="10" v-if="!reviewModel">
      <el-col :span="5">
        <el-card>
          <div slot="header" class="clearfix">
            <span>缩略图</span>
            <span class="big_look tr45">
              <i class="el-icon-rank" @click="openBigModel"></i>
            </span>
          </div>
          <div>
            <Thumbnail :lists="lists"></Thumbnail>
          </div>
        </el-card>
      </el-col>
      <el-col :span="19">
        <el-card>
          <div slot="header" class="clearfix">
            <span>页面设置</span>
            <span class="big_look p-10">
              <el-button size="small" @click="goback">返 回</el-button>
              <el-button size="small" type="primary" @click="save"
                >保 存</el-button
              >
            </span>
          </div>
          <div>
            <ThumbnailData
              :listsData="lists"
              @onChange="getChangeValue"
              ref="ThumbnailData"
            ></ThumbnailData>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row v-if="reviewModel">
      <ReviewModel :lists="lists" @backTemplate="openBigModel"></ReviewModel>
    </el-row>
  </div>
</template>

<script>
import Thumbnail from './components/Thumbnail'
import ThumbnailData from './components/ThumbnailData'
import ReviewModel from './bigModel.vue'
import {
  saveMeetingConfigInfo,
  findAllByMeetingId
} from '@/apis/meetingConfiguration.js'
import { deepClone,getAccessToken  } from '@/utils/util.js'
export default {
  components: {
    Thumbnail,
    ThumbnailData,
    ReviewModel
  },
  data() {
    return {
      // 缩略图
      lists: [],
      reviewModel: false,
      copyList: []
    }
  },
  mounted() {
    this.getLists()
  },
  methods: {
    async getLists() {
      const res = await findAllByMeetingId(this.$route.query.meetingId)
      if (res.code == 200) {
        res.data.forEach((element) => {
          delete element.contentListsObj
        })
        this.lists = res.data
        this.copyList = deepClone(res.data)
      } else {
        this.$message.error(res.msg)
      }
    },
    async save() {
      let flag = false
      for (let key of Object.keys(this.$refs.ThumbnailData.$refs)) {
        if (key != 'chooseModel') {
          this.$refs.ThumbnailData.$refs[key].map((item) => {
            item.$refs.form.validate((valid) => {
              if (!valid) {
                flag = false
              } else {
                flag = true
              }
            })
          })
        }
      }
      if (flag || this.lists.length == 0) {
        console.log(this.lists)
        const res = await saveMeetingConfigInfo({
          list: this.lists,
          meetingId: this.$route.query.meetingId
        })

        if (res.code == 200) {
          this.$message.success('保存成功')
          this.$router.push({
            path: '/meetingConfiguration',
            query: {
              access_token: getAccessToken()
            }
          })
        } else {
          this.$message.error(res.msg || '保存失败！')
        }
      } else {
        this.$message.warning('请完整填写！')
      }
    },
    openBigModel() {
      console.log(this.lists)
      this.reviewModel = !this.reviewModel
    },
    getChangeValue(v) {
      this.lists = v
    },
    areObjectValuesEqual(a, b) {
      if (a === b) return true // 处理基本类型和相同引用的情况

      if (
        typeof a !== 'object' ||
        a === null ||
        typeof b !== 'object' ||
        b === null
      ) {
        return false // 处理基本类型或 null 的情况
      }

      if (Array.isArray(a) != Array.isArray(b)) {
        return false // 确保两者都为数组或者都为对象
      }

      let keysA = Object.keys(a)
      let keysB = Object.keys(b)

      if (keysA.length != keysB.length) {
        return false // 对象的键长度不同，直接返回 false
      }

      for (let key of keysA) {
        if (
          !keysB.includes(key) ||
          !this.areObjectValuesEqual(a[key], b[key])
        ) {
          return false // 对象的键不同或对应的值不同
        }
      }

      return true // 所有检查通过，两个对象或数组相等
    },
    goback() {
      let flag = this.areObjectValuesEqual(this.lists, this.copyList)
      if (!flag) {
        this.$confirm('当前页面内容还没有保存，是否要保存?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            this.save()
          })
          .catch(() => {
            this.$router.push({
              path: '/meetingConfiguration',
              query: {
                access_token: getAccessToken()
              }
            })
            this.$message({
              type: 'info',
              message: '已取消'
            })
          })
      } else {
        this.$router.push({
          path: '/meetingConfiguration',
          query: {
            access_token: getAccessToken()
          }
        })
      }
    }
  }
}
</script>

<style lang="less" scoped>
::v-deep {
  .el-card {
    height: calc(100vh - 20px);
  }
  .el-card__body {
    height: calc(100vh - 80px);
    overflow-y: scroll;
  }
}

.clearfix {
  font-size: 16px;
  .big_look {
    float: right;
    padding: 3px 0;
    cursor: pointer;
  }
  .tr45 {
    font-size: 20px;
    transform: rotate(45deg);
  }
  .p-10 {
    position: relative;
    top: -10px;
  }
}
</style>
